<template>
<div class="login">
    <div class="box">
        <h1>应用配置</h1>
        <a-form class='login-form' @submit="submitLogin" :autoFormCreate="(form)=>{this.loginForm = form}">
            <a-form-item fieldDecoratorId="appId" :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入应用ID' }]}">
                <a-input placeholder='应用ID' maxlength="20">
                    <a-icon style="color:rgba(0,0,0,.25)"/>
                </a-input>
            </a-form-item>

            <a-form-item fieldDecoratorId="accountType" :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入账号类型' }]}">
                <a-input placeholder='账号类型' maxlength="10">
                    <a-icon style="color:rgba(0,0,0,.25)"/>
                </a-input>
            </a-form-item>

            <a-form-item fieldDecoratorId="admin" :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入管理账号' }]}">
                <a-input placeholder='管理账号' maxlength="10">
                    <a-icon style="color:rgba(0,0,0,.25)"/>
                </a-input>
            </a-form-item>

            <a-form-item fieldDecoratorId="account" :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入登陆账号' }]}">
                <a-input placeholder='登陆账号' maxlength="30">
                    <a-icon style="color:rgba(0,0,0,.25)"/>
                </a-input>
            </a-form-item>

            <a-form-item fieldDecoratorId="key" :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入应用私钥' }]}">
                <a-textarea placeholder='应用私钥' rows="5">
                    <a-icon style="color:rgba(0,0,0,.25)"/>
                </a-textarea>
            </a-form-item>

            <a-form-item>
                <a-button type="primary" htmlType="submit">确定</a-button>
            </a-form-item>
        </a-form>
    </div>
</div>
</template>

<script>
    export default {
        name: "login",
        created() {
            console.log('login created');
        },
        mounted() {
            console.log('login mounted');
        },
        methods: {
            submitLogin(e) {
                e.preventDefault();
                this.loginForm.validateFields((err, values) => {
                    if (!err) {
                        this.$http.post('/login', values).then((res) => {
                            console.log(res);
                            this.$router.push({path: '/home'});
                            this.$message.success('配置成功');
                        }).catch((err) => {
                            console.error(err);
                            this.$message.warning('配置失败，请检查配置参数');
                        })
                    }
                })
            }
        }
    }
</script>

<style>
    div.login div.box{width: 500px; margin:10% auto;}
    div.login button {width: 100%;}
    div.login h1{text-align: center;}
</style>